<template>         
	<!-- swiper中的transfrom会使fixed失效,此时需设置fixed为false,而top会自动使用padding-top -->
	<mescroll-uni :fixed="false" top="92" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit">
		<!-- 数据列表 -->
		<view class="bg-white margin-bottom" v-for="(item,index) in ordersList" :key="index">
			<view class="padding solid-bottom">订单编号：{{item.id}}</view>
			<view class="padding-tb-sm padding-lr solid-bottom" style="line-height:1.8;">
				<view>课程名称：{{item.course.course_name}}</view>
				<view>老师名称：{{item.course.teacher.teacher_name}}</view>
				<view>课时数量：{{item.class_hour}}课时</view>
				<view>上课学员：{{!item.student.student_name?'未知学员':item.student.student_name}}</view>
				<view>下单时间：{{item.created_at}}</view>
			</view>
			<view class="padding text-right text-lg">合计：<text class="text-price text-red">{{item.amount}}</text></view>
			<view class="padding text-center text-orange text-lg solid-top" @click="pay(item.id)" v-if="item.status==0">去付款</view>
		</view>
	</mescroll-uni> 
</template>
 
<script> 
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	 
	export default {
		components: { 
			MescrollUni,
		}, 
		data() {
			return {
				mescroll: null, //mescroll实例对象
				downOption:{
					auto:false, // 不自动加载
				},
				upOption:{
					auto:false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
						icon: '/static/image/queshengtu.svg'
					}
				},
				ordersList: [],	//订单列表
				isInit: false, // 列表是否已经初始化
			}
		},
		props:{
			i: Number, // 每个tab页的专属下标
			index: { // 当前tab的下标
				type: Number,
				default(){
					return 0
				}
			} 
		},
		watch:{
			// 监听下标的变化
			index(val){
				if (this.i === val && !this.isInit) {
					this.isInit = true; // 标记为true
					this.mescroll.triggerDownScroll();
				}
			}
		},
		mounted() {
			// 第一个tab,自动加载数据
			if(this.i === 0){
				this.isInit = true; // 标记为true
				this.mescroll.triggerDownScroll();
			}
		},
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				console.log('下拉刷新了', mescroll);
				
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				console.log('上拉加载了', mescroll);
				 
				 // 此时mescroll会携带page的参数:
				 let pageNum = mescroll.num; // 页码, 默认从1开始
				 let pageSize = mescroll.size; // 页长, 默认每页10条
				 
				 // 订单列表
				 this.getOrders(pageNum, pageSize, mescroll, this.i)
			},
			// 订单列表
			async getOrders(pageNum, pageSize, mescroll, i){
				let res = await this.$api.orders({page: pageNum, page_size: pageSize, status: i})
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					console.log('订单列表', res.data.data)
					console.log("i="+this.i+", mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + res.data.data.length);
					
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.data
					
					// 接口返回的总条数
					let totalSize = res.data.meta.total
					
					//设置列表数据
					if(mescroll.num == 1) this.ordersList = []; //如果是第一页需手动置空列表
					this.ordersList = this.ordersList.concat(curPageData); //追加新数据
					
					// 成功隐藏下拉加载状态
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					mescroll.endBySize(curPageData.length, totalSize); 
					
					// this.$store.dispatch('sendOrders', res.data.data)
				}
			},
			// 去付款
			pay(orderId){
				// 发起支付
				this.goPay(orderId)
			},
			// 发起支付
			async goPay(id) {
				uni.hideNavigationBarLoading()
				console.log(id);
				let res = await this.$api.pay(id)
				console.log('发起支付', res)
				
				uni.requestPayment({
					timeStamp: res.data.timeStamp.toString(),
					nonceStr: res.data.nonceStr,
					package: res.data.package,
					signType: res.data.signType,
					paySign: res.data.paySign,
					success: function(res) {
						console.log('付款成功', res) 
						
						uni.showToast({
						    title: '付款成功',
							icon: 'success',
							success: () => {
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}, 1000)
							}
						});
					},
					fail: function(res) {
						console.log('取消付款', res)
						
						uni.showToast({
							title: '你取消了付款',
							icon: 'none',
							mask: true
						})
					}
				})
			}
		}
	}
</script>
